<script setup lang="ts">
import { type FormRules, type FormInstance, ElMessage, ElLoading } from 'element-plus'
import Upload from './components/CooperationUploadFile/index.vue'
import { usePidMenu } from '~/stores/layout/index'
import APICooperation from '~/api/cooperation/index'
import APICommon from '@/api/common'
import { downloadFile } from '@/utils/index'

const { getPidMenuList } = usePidMenu()

const { pidMenuList } = storeToRefs(usePidMenu())

getPidMenuList()

const formData = ref<any>({})

const rules = reactive<FormRules<any>>({
    color_icon: [{
        required: true, message: '请选择彩色图标', trigger: 'blur'
    }],
    grey_icon: [{
        required: true, message: '请选择灰色图标', trigger: 'blur'
    }],
    name: [{
        required: true, message: '请输入品牌名称', trigger: 'blur'
    }],
    brand_prove: [{
        required: true, message: '请选择品牌证明', trigger: 'blur'
    }],
    brand_href: [{
        required: true, message: '请输入超链接地址', trigger: 'blur'
    }],
    category_id: [{
        required: true, message: '请选择购买类型', trigger: 'blur'
    }],
    code: [{
        required: true, message: '请输入对应编号', trigger: 'blur'
    }],
    link_status: [{
        required: true, message: '请选择是否已链接心安元素', trigger: 'blur'
    }],
    link_prove: [{
        required: true, message: '请选择链接截图', trigger: 'blur'
    }]
})

const formRef = shallowRef<FormInstance>()

function submitFormData() {
    if (!formRef.value) return
    formRef.value.validate((valid) => {
        if (valid) {
            const loading = ElLoading.service({ lock: true })
            APICooperation.setPartners(formData.value).then(() => {
                ElMessage.success('提交成功')
                formData.value = {}
            }).finally(() => {
                loading.close()
            })
        }
    })
}

const dialogVisible = shallowRef<boolean>(false)

function handleDownload() {
    dialogVisible.value = true
}

const webIconList = ref<any[]>([])

function getWebIcon() {
    APICommon.getWebIcon().then(({ data }) => {
        webIconList.value = data
    })
} getWebIcon()

function handleDownloadFile(file: string) {
    downloadFile(file)
}

const column = [{
    label: '入职心安元素',
    jumpLink: '/entry'
}, {
    label: '合作伙伴',
    jumpLink: '/cooperation',
    active: true
}, {
    label: '在线客服',
    jumpLink: '/service'
}, {
    label: '帮助中心',
    jumpLink: '/help'
}, {
    label: '意见反馈',
    jumpLink: '/feedback'
}]

const client = shallowRef<boolean>(false)

onMounted(() => {
    client.value = true
})

</script>

<template>
    <div class="cooperation-upload">
        <ColumnNav class="left-nav" :column="column" />
        <div class="cooperation-upload-content">
            <div class="title">上传合作标志</div>
            <div class="describe">上传要求</div>
            <div class="describe">
                心安元素感谢您的选择和认可。我们会尽全力展示您的品牌，希望通过此举帮您在品牌建树上尽我们的绵薄之力！注:请主动链接心安元素的网站：www.xinanyuansu.com<span
                    @click="handleDownload">（心安元素标志下载）</span>，并请按要求提供您展示的资料。点击返回上一步。
            </div>
            <el-form ref="formRef" style="max-width: 600px; margin-top: 30px;" :model="formData" :rules="rules"
                label-width="auto" v-if="client">
                <el-form-item label="彩色图标" prop="color_icon">
                    <Upload title="【彩色图标】" v-model="formData.color_icon" />
                </el-form-item>
                <el-form-item label="灰色图标" prop="grey_icon">
                    <Upload title="【灰色图标】" v-model="formData.grey_icon" />
                </el-form-item>
                <el-form-item label="品牌名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入品牌名称" />
                </el-form-item>
                <el-form-item label="品牌证明" prop="brand_prove">
                    <Upload title="【商标文件】" v-model="formData.brand_prove" />
                </el-form-item>
                <el-form-item label="超链接地址" prop="brand_href">
                    <el-input v-model="formData.brand_href" placeholder="请输入超链接地址" />
                </el-form-item>
                <el-form-item label="购买类型" prop="category_id">
                    <el-select v-model="formData.category_id" placeholder="请选择购买类型">
                        <el-option v-for="item in pidMenuList" :key="item.id" :label="item.title" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="对应编号" prop="code">
                    <el-input v-model="formData.code" placeholder="请输入对应编号" />
                </el-form-item>
                <el-form-item label="您网站是否已链接心安元素" prop="link_status">
                    <el-radio-group v-model="formData.link_status">
                        <el-radio :value="1">是</el-radio>
                        <el-radio :value="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="链接截图" prop="link_prove">
                    <Upload title="【链接截图】" v-model="formData.link_prove" />
                </el-form-item>
                <div class="form-btns">
                    <button type="button" @click="$router.push('cooperation')">取消</button>
                    <button type="button" @click="submitFormData">提交</button>
                </div>
            </el-form>
        </div>
        <el-dialog v-model="dialogVisible" width="600" :show-close="false">
            <template #header>
                <DialogClose title="心安元素标志下载" @close="dialogVisible = false" />
            </template>
            <ul class="symbol">
                <li v-for="(item, index) in webIconList" :key="index">
                    <div class="symbol-title">
                        {{ item.type }}
                    </div>
                    <div class="symbol-content">
                        <div v-for="(i, index) in item.list" :key="index">
                            <img :src="i.color_icon" alt="color_icon" @click="handleDownloadFile(i.color_icon)">
                            <img :src="i.grey_icon" alt="grey_icon" @click="handleDownloadFile(i.grey_icon)">
                        </div>
                    </div>
                </li>
            </ul>
            <div class="hint">点击图标即可下载</div>
        </el-dialog>
    </div>
</template>

<style lang="less" scoped>
.cooperation-upload {
    width: 1250px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .hint {
        margin-top: 20px;
        color: red;
    }

    .left-nav {
        float: left;
        margin-right: 50px;
    }

    .symbol {
        list-style: none;

        .symbol-title {
            width: 60px;
        }

        li {
            display: flex;
            flex-wrap: wrap;
            gap: 0 20px;

            .symbol-content {

                img {
                    height: 50px;
                    margin-right: 20px;
                    cursor: pointer;
                }
            }
        }
    }

    .form-btns {
        display: flex;
        gap: 0 16px;
        margin-top: 30px;
        margin-left: 190px;

        button {
            width: 112px;
            height: 38px;
            border-radius: 4px;
            background-color: rgba(187, 187, 187, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            border: none;
            display: block;
            cursor: pointer;

            &:nth-child(1) {
                background-color: rgba(187, 187, 187, 1);
            }

            &:nth-child(2) {
                background-color: rgba(249, 20, 20, 1);
            }
        }
    }

    .cooperation-upload-content {
        width: 1000px;
        float: left;

        .title-describe {
            text-align: center;
        }

        .describe {
            color: rgba(154, 154, 154, 1);
            font-size: 14px;
            line-height: 30px;

            span {
                color: rgba(15, 64, 245, 1);
                cursor: pointer;
            }
        }


        .title {
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            text-align: center;
            font-family: 'SOURCEHANSANSCN-LIGHT';
        }

    }

}
</style>
